﻿
@{
    ViewBag.Title = "AnalysisPage";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css {
    <link href="~/Assets/css/lib/bootstrap-select.css" rel="stylesheet" />
    <link href="~/Assets/css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="~/Assets/css/lib/fileinput.css" rel="stylesheet" />
}
<div class="page-content" ng-cloak ng-controller="HomeController" ng-init="
     IssueTypeModel={};
     IssueTypeModel.Year='@DateTime.Now.Year.ToString()';
       IssueParkModel={};
     IssueParkModel.Year='@DateTime.Now.Year.ToString()';
     GetCheckNum();
     GetCheckYearList();
     CheckModel.Type=0;
     CheckModel.Year='@DateTime.Now.Year.ToString()';
     GetCheckCountView(CheckModel);
     GetCategoryView(IssueTypeModel);
       IssueLevelModel={};
     IssueLevelModel.Year='@DateTime.Now.Year.ToString()';
     GetLevelView(IssueLevelModel);
     GetParkView(IssueParkModel);
     GetPlaceCountByPark();
     GetPlaceCountByType();
     GetDeviceCountByType();
     GetUserCountByType();
     GetUserCountByOnline();
     GetMonthlyCheckChart(CheckModel);
     ">
    <div class="page-heading">
        <h1>统计分析</h1>
        <div class="options">
            <div class="btn-toolbar">

            </div>
        </div>
    </div>
    <ol class="breadcrumb">
        <li><a>主页</a></li>
        <li class="active"><a>统计分析</a></li>
    </ol>
    <div class="row">
        <div class="col-md-3">
            <a class="info-tiles tiles-inverse has-footer" href="#">
                <div class="tiles-heading">
                    <div class="pull-left">检查台账</div>
                    <div class="pull-right">
                        <div id="tileorders" class="sparkline-block"><canvas width="39" height="13" style="display: inline-block; width: 39px; height: 13px; vertical-align: top;"></canvas></div>
                    </div>
                </div>
                <div class="tiles-body">
                    <div class="text-center" ng-bind="CheckCount.Total">0</div>
                </div>
                <div class="tiles-footer">
                    <div class="pull-left">本周新增</div>
                    <div class="pull-right percent-change">+{{CheckCount.ThisWeek}}</div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a class="info-tiles tiles-orange has-footer" href="#">
                <div class="tiles-heading">
                    <div class="pull-left">异常数量</div>
                    <div class="pull-right">
                        <div id="tilerevenues" class="sparkline-block"><canvas width="40" height="13" style="display: inline-block; width: 40px; height: 13px; vertical-align: top;"></canvas></div>
                    </div>
                </div>
                <div class="tiles-body">
                    <div class="text-center" ng-bind="CheckCount.TotalException">0</div>
                </div>
                <div class="tiles-footer">
                    <div class="pull-left">本周新增</div>
                    <div class="pull-right percent-change">+{{CheckCount.ThisWeekCount}}</div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a class="info-tiles tiles-blue has-footer" href="#">
                <div class="tiles-heading">
                    <div class="pull-left">问题台账</div>
                    <div class="pull-right">
                        <div id="tiletickets" class="sparkline-block"><canvas width="13" height="13" style="display: inline-block; width: 13px; height: 13px; vertical-align: top;"></canvas></div>
                    </div>
                </div>
                <div class="tiles-body">
                    <div class="text-center" ng-bind="IssueCount.Total">0</div>
                </div>
                <div class="tiles-footer">
                    <div class="pull-left">本周增长</div>
                    <div class="pull-right percent-change" ng-bind="IssueCount.ThisWeek">0</div>
                </div>
            </a>
        </div>

        <div class="col-md-3">
            <a class="info-tiles tiles-midnightblue has-footer" href="#">
                <div class="tiles-heading">
                    <div class="pull-left">整改完成</div>
                    <div class="pull-right">
                        <div id="tilemembers" class="sparkline-block"><canvas width="39" height="13" style="display: inline-block; width: 39px; height: 13px; vertical-align: top;"></canvas></div>
                    </div>
                </div>
                <div class="tiles-body">
                    <div class="text-center" ng-bind="IssueCount.Complelte">0</div>
                </div>
                <div class="tiles-footer">
                    <div class="pull-left">整改中</div>
                    <div class="pull-right percent-change" ng-bind="IssueCount.Ret">0</div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 bs-grid">
            <div class="panel panel-default panel-btn-focused" id="p1" data-widget-editbutton="false">
                <div class="panel-heading">
                    <h2>
                        <ul class="nav nav-tabs">
                            <li ng-click="CheckModel.Type=0;GetCheckCountView(CheckModel);" class="active"><a href="#tab-visitor" data-toggle="tab"><i class="fa fa-user visible-xs"></i><span class="hidden-xs">场所分布态势</span></a></li>
                            <li ng-click="CheckModel.Type=1;GetCheckCountView(CheckModel);"><a href="#tab-visitor" data-toggle="tab"><i class="fa fa-user visible-xs"></i><span class="hidden-xs">部门分布态势</span></a></li>
                            <li ng-click="CheckModel.Type=2;GetCheckCountView(CheckModel);"><a href="#tab-revenues" data-toggle="tab"><i class="fa fa-bar-chart-o visible-xs"></i><span class="hidden-xs">月份分布态势</span></a></li>
                        </ul>
                    </h2>
                    <div class="panel-ctrls">
                        <div class="col-lg-6">
                            <select ng-model="CheckModel.Year" ng-change="GetCheckCountView(CheckModel);" class="form-control" style="margin-top:10px;">
                                <option ng-repeat="x in CheckYearList" value="{{x}}" selected>{{x}}</option>
                            </select>
                        </div>
                        <div class="col-lg-6">
                            <select ng-model="CheckModel.Month" ng-change="GetCheckCountView(CheckModel);" class="form-control" style="margin-top: 10px;">
                                <option selected value="">全部</option>
                                <option value="01">1</option>
                                <option value="02">2</option>
                                <option value="03">3</option>
                                <option value="04">4</option>
                                <option value="05">5</option>
                                <option value="06">6</option>
                                <option value="07">7</option>
                                <option value="08">8</option>
                                <option value="09">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-1">
                            <div ng-show="CheckModel.Type==0">
                                <select class="selectpicker show-tick form-control PlaceType_Select" ng-model="CheckModel.PlaceType" ng-change="GetPlaceCheckChart(CheckModel);" multiple>
                                    <option value="1">危险点</option>
                                    <option value="2">重要部位</option>
                                    <option value="3">办公场所</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="tab-content" id="countview">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>近30日检查台账提交情况</h2>
                    <div class="panel-ctrls">

                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-1">
                            <div>
                                <select class="selectpicker show-tick form-control PlaceType_Select" ng-model="CheckModel.PlaceType2" ng-change="GetMonthlyCheckChart(CheckModel);" multiple>
                                    <option value="1">危险点</option>
                                    <option value="2">重要部位</option>
                                    <option value="3">办公场所</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="checkrecordmonthlyview" style="width:100%; height: 300px" class="centered"></div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>问题类型分布</h2>
                    <div class="panel-ctrls">

                        <select class="form-control" ng-model="IssueTypeModel.Year" ng-change="GetCategoryView(IssueTypeModel);" style="margin-top:10px;">
                            <option ng-repeat="x in CheckYearList" value="{{x}}" selected>{{x}}</option>
                        </select>

                    </div>
                </div>
                <div class="panel-body">
                    <div id="typeview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>问题所在园区分布</h2>
                    <div class="panel-ctrls">
                        <select class="form-control" ng-model="IssueParkModel.Year"  ng-change="GetParkView(IssueParkModel);"  style="margin-top:10px;">
                            <option ng-repeat="x in CheckYearList" value="{{x}}" selected>{{x}}</option>
                        </select>
                    </div>
                </div>
                <div class="panel-body">
                    <div id="factoryview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>问题等级分布</h2>
                    <div class="panel-ctrls">
                        <div class="col-lg-12">
                            <select class="form-control" style="margin-top:10px;" ng-model="IssueLevelModel.Year" ng-change="GetLevelView(IssueLevelModel);">
                                <option ng-repeat="x in CheckYearList" value="{{x}}" selected>{{x}}</option>
                            </select>
                        </div>

                    </div>
                </div>
                <div class="panel-body">
                    <div id="souceview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>按期整改率</h2>
                    <div class="panel-ctrls">
                        <select class="form-control" style="margin-top:10px;">
                            <option value="@DateTime.Now.Year" selected>@DateTime.Now.Year</option>
                        </select>
                    </div>
                </div>
                <div class="panel-body">
                    <div id="retrateview" style="width:100%; height: 300px" class="tab-content"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>各场所类型数量占比</h2>
                    <div class="panel-ctrls">

                    </div>
                </div>
                <div class="panel-body">
                    <div id="placetypeview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>各园区场所数量占比</h2>
                    <div class="panel-ctrls">

                    </div>
                </div>
                <div class="panel-body">
                    <div id="parkplaceview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>设备类型数量</h2>
                    <div class="panel-ctrls">

                    </div>
                </div>
                <div class="panel-body">
                    <div id="devicetypeview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>各用户角色占比</h2>
                    <div class="panel-ctrls">
                    </div>
                </div>
                <div class="panel-body">
                    <div id="usertypeview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>近7日活跃用户数</h2>
                    <div class="panel-ctrls">

                    </div>
                </div>
                <div class="panel-body">
                    <div id="onlineview" style="width:100%; height: 300px" class="centered"></div>
                </div>
            </div>
        </div>
    </div>
</div>


@section Js{
    <script src="~/Assets/js/base/echart.min.js"></script>
    <script src="~/Assets/js/pg/Home.js?v=@DateTime.Now.ToString("yyyyMMddHHmm")"></script>
    <script>
        $(".PlaceType_Select").selectpicker({
            noneSelectedText: '所有类型场所'//默认显示内容
        });
        setTimeout(function () {
            GetRateView();
            //GetLevelView();
        }, 1000);

        function GetRateView() {
            var myChart = echarts.init(document.getElementById('retrateview'));
            var option = {
                legend: {
                    show: false
                },
                tooltip: {},
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.06)',
                            width: 1
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.06)',
                            width: 1,
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgba(122, 144, 154)'   //这里用参数代替了
                        }
                    }

                },
                yAxis: {

                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.06)',
                            width: 1
                        }
                    }
                },
                grid:
                {
                    bottom: 20,
                    top: 20,
                    left: 30,
                    right: 25
                },

                series: [
                    {
                        name: '按期整改率',
                        type: 'line',
                        itemStyle: {
                            color: 'rgba(135, 153, 154, 0.7)',
                            borderWidth: 2,
                            borderColor: "rgba(135, 153, 154)",
                        },
                        data: [66, 52, 65, 53, 55, 27, 44, 62, 42, 54, 59, 88]
                    }
                ]
            };
            myChart.setOption(option, true);
        }


        //GetLevelView();
        function GetLevelView() {
            var myChart = echarts.init(document.getElementById('souceview'));
            var datalist = [];

            datalist.push({ 'name': '安全风险', 'value': 12 });
            datalist.push({ 'name': '一级隐患', 'value': 2 });
            datalist.push({ 'name': '二级隐患', 'value': 3 });
            datalist.push({ 'name': '三级隐患', 'value': 1 });
            var option = {
                title: {
                    show: false,
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '问题等级分布',
                        type: 'pie',
                        center: ['60%', '50%'],
                        radius: '50%',
                        data: datalist,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

        //GetParkView();
        function GetParkView() {
            var myChart = echarts.init(document.getElementById('factoryview'));
            var datalist = [];

            datalist.push({ 'name': '龙华园区', 'value': 12 });
            datalist.push({ 'name': '张江园区', 'value': 11 });
            datalist.push({ 'name': '总部园区', 'value': 6 });
            datalist.push({ 'name': '科普中心', 'value': 7 });
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '园区分布图',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        color: ['rgb(83,148,201)', 'rgb(55,191,141)', 'orange', 'grey'],
                        data: datalist
                    }
                ]
            };
            myChart.setOption(option);
        }

        //GetTypeView();
        function GetTypeView() {

            var datalist = [];

            datalist.push({ 'name': '相关方管理', 'value': 12 });
            datalist.push({ 'name': '个体防护', 'value': 11 });
            datalist.push({ 'name': '重大危险源管理', 'value': 22 });
            datalist.push({ 'name': '应急管理', 'value': 6 });
            datalist.push({ 'name': '设施设备', 'value': 7 });
            datalist.push({ 'name': '作业许可', 'value': 8 });
            datalist.push({ 'name': '安全培训教育', 'value': 14 });
            datalist.push({ 'name': '职业健康', 'value': 5 });
            var myChart = echarts.init(document.getElementById('typeview'));
            var option = {
                title: {
                    show: false,
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '问题类型分布',
                        type: 'pie',
                        center: ['60%', '50%'],
                        radius: '50%',
                        data: datalist,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>
}

